<template>
  <div class="container">
    <div class="close" @click="$emit('close-dialog')">关闭</div>
    <!-- <div class="uploadfile">
      <input class="uploadfile" type="file">
    </div> -->
    <div class="uploadfile">
      <el-upload
        ref="upload"
        action=""
        :on-preview="handlePreview"
        accept=".jpg,.png"
        :on-remove="handleRemove"
        :on-change="imgBroadcastChange"
        :on-success="handleAvatarSuccess"
        :file-list="fileList"
        :auto-upload="false"
        :limit="1"
      >
        <div class="pic-btn-body">
          <el-button type="primary">Click to upload</el-button>
        </div>
      </el-upload>
      <div @click="common_comment_submit">保存</div>
    </div>
  </div>
</template>

<script>
import 'element-plus/theme-chalk/index.css'
import { ElUpload } from 'element-plus'
import { ElButton } from 'element-plus'
import { uploadImgToBase64 } from './js/utils'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components:{ ElUpload, ElButton },
  emits: ['close-dialog'],
  data() {
    return {
      SignBase64: '',
      fileList: []
    }
  },
  methods: {
    imgBroadcastChange(file) {
      const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const isJpg = testmsg === 'jpg' || testmsg === 'png'
      if(!isJpg) {
        this.fileList = this.fileList.filter(v => v.uid !== file.uid)
        this.$message.err('上传图片不是png或jpg的格式!')
      }
      return isJpg
    },
    async common_comment_submit() {
      const imgBroadcastListBase64  = []
      if(this.IsReupload){
        // 并发 转码轮播图片list => base64
        const filePromises = this.fileList.map(async file => {
          const response = await uploadImgToBase64(file.raw)
          return response.result.replace(/.*;base64,/, '') // 去掉data:image/jpeg;base64,
        })
        for (const textPromise of filePromises) {
          imgBroadcastListBase64.push(await textPromise)
        }
      }
      this.SignBase64 = imgBroadcastListBase64.join()
      console.log(this.SignBase64, '------this.SignBase64')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #2196F3;
  width: 450px;
  height: 300px;
  .close {
    position: absolute;
    right: 20px;
    top: 10px;
  }
  .uploadfile {
    width: 200px;
    height: 30px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}
</style>
